<template>
    <div class="page1-lovexhj1">
        <img src="@/assets/images/love/ljj.jpg" alt="ljj" />
        <img src="@/assets/images/love/cat.gif" alt="cat" />
        <img src="@/assets/images/love/zhc.jpg" alt="zhc" />
        <p id="lovetime"></p>
        <p>我也不知道该准备一点什么给你逗你开心</p>
        <p>还是写一点好玩的送给你吧~</p>
        <span class="right">往右划动 →</span>
    </div>

    <div class="page1-lovexhj1">
        <img class="cat" src="@/assets/images/love/cat2.gif" alt="cat2" />
        <p class="catText">你常对我发的表情 ↑</p>
        <p>上次也是花心思写了一个小玩意给你</p>
        <p>但我觉得整体设计&&界面都过于<b>LOW</b></p>
        <p>那就重新送你一个吧</p>
        <span class="right">再划一下 →</span>
    </div>


    <div class="page1-lovexhj1">
        <img class="cat" src="@/assets/images/love/cat3.gif" alt="cat3" />
        <p class="catText">抱死你 ↑</p>
        <p>这次我<b>超级超级超级超级</b></p>
        <p>认真的写了一遍</p>
        <p style="font-size: 13px">
            以 框架构造、 <span style="color: red; font-size: 16px">爱你</span>、 视觉体验、响应式
            为核心制作
        </p>
        <span class="right">再划一次吧 →</span>
    </div>

    <div class="page1-lovexhj1">
        <img class="cat" src="@/assets/images/love/cat4.gif" alt="cat4" />
        <p class="catText">拍你猪头 ↑</p>
        <p>这次应该不会太难看了吧</p>
        <p>希望你喜欢呀</p>
        <p>爱你哟(๑′ᴗ‵๑)</p>
        <b>520快乐我的<span style="color: pink">猪</span></b>
    </div>


</template>

<script>
export default {
    data() {
        return {

        }
    },
    mounted() {

    },
    methods: {
        lovetime() {
            // 使用箭头函数以保持Vue实例的上下文
            window.setTimeout(() => {
                this.lovetime();
            }, 1000);

            const seconds = 1000;
            const minutes = seconds * 60;
            const hours = minutes * 60;
            const days = hours * 24;
            const years = days * 365;

            const today = new Date();
            const todayYear = today.getFullYear();
            const todayMonth = today.getMonth() + 1;
            const todayDate = today.getDate();
            const todayHour = today.getHours();
            const todayMinute = today.getMinutes();
            const todaySecond = today.getSeconds();

            const t0 = Date.UTC(2018, 11, 19, 0, 0, 0);
            const t1 = Date.UTC(2019, 11, 19, 0, 0, 0);
            const t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
            const diff = t2 - t1;

            const diffYears = Math.floor(diff / years);
            const diffDays = Math.floor((diff / days) - diffYears * 365);
            const diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
            const diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);
            const diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);

            document.getElementById("lovetime").innerHTML = "我们已经在一起 " + diffYears + "年" + diffDays + "天" + diffHours + "小时" + diffMinutes + "分钟" + diffSeconds + "秒啦";
        }
    }

}
</script>


<style scoped>



body {
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    color: white;
}

a {
    color: white;
    text-decoration: none;
    transition: all 0.3s;
}

a:hover {
    color: rgb(0, 130, 255);
    text-shadow: 0 0 5px white;
}

.swiper-container {
    width: 100%;
    height: 500px;
    padding-top: 120px;
}



/* 分页总体 */
.page {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* 分页1 - 骚话 */
.page1 {
    background-image: linear-gradient(to right, rgba(0, 162, 255, 0.4), rgba(255, 0, 255, 0.2)), url(@/assets/images/love/bg1.jpg);
}

.swiper-container-lovexhj1 {
    width: 550px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.page1-lovexhj1 img {
    width: 100px;
    border-radius: 50%;
    margin-bottom: 20px;
}

.page1 .right {
    border-bottom: 1px solid black;
    line-height: 50px;
    font-size: 15px;
}

.page1 .cat {
    width: 150px;
}

.catText {
    font-size: 13px;
    color: gray;
}
</style>
